<template>
  <div>
    <div class="blogDetail_box">
      <el-page-header @back="goBack"> </el-page-header>
      <h2>{{ blogInfo.title }}</h2>
      <div class="card_detail">
        <div class="rol">
          <i class="el-icon-time"></i>
          <span>发表于</span>
          <span>{{ blogInfo.time }}</span>
          <span>分类</span>
          <span>{{ blogInfo.cid }}</span>
        </div>
      </div>

      <el-divider></el-divider>
      <!-- github-markdown样式渲染 -->
      <!-- <div class="markdown-body" v-html="blogInfo.content"></div> -->
      <mavon-editor
        class="md"
        :value="blogInfo.content"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
        :boxShadow="false"
      >
      </mavon-editor>

      <!-- 属性解释 -->
      <!-- :value="detailContent.content"：引入要转换的内容
                :subfield = "false"：开启单栏模式
                :defaultOpen = "'preview'"：默认展示预览区域
                :toolbarsFlag = "false"：关闭工具栏
                :editable="false"：不允许编辑
                scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)
                :ishljs = "true"：开启代码高亮 -->

      <div class="blog_bottom">
        <!-- 上一篇,下一篇区域 -->
        <div class="end_tip">
          <div class="copyright">
            <ul>
              <li><strong>本文作者：</strong>{{ blogInfo.uid }}</li>
              <li>
                <strong>版权声明：</strong>本博客所有文章除特别声明外，均采用
                BY-NC-SA 许可协议。转载请注明出处！
              </li>
            </ul>
          </div>
          <p>
            -------------本文结束<i class="el-icon-star-on"></i
            >感谢您的阅读-------------
          </p>
          <el-tag effect="plain" type="info"
            ><i class="el-icon-collection-tag"></i>
            {{ blogInfo.categories }}</el-tag
          >
        </div>
      </div>
      <div class="comment_box">
      <div class="comment_tip">
        <span><i class="el-icon-warning-outline"></i>评论说明： </span>
        <p>务必遵守网络评论文明，恶语攻击是会被封号的哦~</p>
        <el-divider></el-divider>
      </div>
      <div>
        <div class="comment_form">
          <el-form
            :model="commentForm"
            :rules="commentRules"
            ref="commentRef"
            label-width="50px"
          >
            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                rows="4"
                v-model="commentForm.content"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="CommentSubmit">提交</el-button>
              <el-button @click="CommentReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      </div>
      <div class="comment_list">
          <div>
            <p>共 {{ CommentTotal }} 条评论</p>
          </div>
          <div>
            <ul>
              <li v-for="list in commentList" :key="list.id">
                <div class="lileft">
                  <el-avatar
                    src="https://img2.baidu.com/it/u=807316040,667422073&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                  ></el-avatar>
                </div>
                <div class="liright">
                  <div class="info">
                    <span class="infoUser">发布者：{{ list.uid }}</span>
                    <span class="infoTime">发布于：{{ list.time }}</span>
                  </div>
                  <p>{{ list.content }}</p>
                </div>
              </li>

              <div class="comment_end_tip">
                <p>没有更多了~</p>
              </div>
            </ul>
          </div>
          <div class="mpage">
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.cur"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="CommentTotal">
          </el-pagination>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
// 引入github-markdown样式渲染md格式的文档
import 'github-markdown-css'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      // 文章id
      bid: '',
      // 文章详情信息
      blogInfo: {},
      // 评论列表
      commentList: [],
      // 品论查询参数
      queryInfo: {
        cur: 1,
        size: 10,
        bid: ''
      },
      CommentTotal: '',
      commentRules: {
        content: [
          { required: true, message: '你还没有进行评论', trigger: 'blur' }
        ]
      },
      username: '',
      // 是否展示
      show: false,
      commentForm: {
        content: '' // 评论内容
      },
      // 点赞
      isLike: false,
      // 文章评分
      rateValue: '',
      // 评论total
      commentInfo: ''
    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo
      }),
    // 用户是否登录，控制按钮是否可用
    canEdit () {
      let editable = false
      if (this.userInfo && this.userInfo.username !== '') {
        editable = true
      }
      return editable
    }
  },
  methods: {
    // 根据 id 获取文章
    async getBlog () {
      this.username = localStorage.getItem('username')
      // 获取文章详细
      const { data: res } = await this.$http.get('/blog/selectByBid.do?currentPage=' + this.queryInfo.cur + '&pageSize=' + this.queryInfo.size + '&bid=' + this.queryInfo.bid)
      console.log('获取文章详情', res)
      if (res.flag !== true) return this.$message.error('获取文章详情失败！')
      this.blogInfo = res.data

      // 设置标识，为了返回能够回到之前的列表页
      sessionStorage.setItem('pageDetail', true)

      // // 使用一个插件markdown-it，用于解析md文档
      // var MardownIt = require('markdown-it')
      // var md = new MardownIt()
      // this.blogInfo.content = md.render(this.blogInfo.content)
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
      //   console.log(newSize)
      this.queryInfo.size = newSize
      this.getBlogComment()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
      // console.log(newCur)
      this.queryInfo.cur = newCur
      // 在SessionStorage中记录当前的页数
      sessionStorage.setItem('currentPage', newCur)
      this.getBlogComment()
    },
    // 获取文章评论
    async getBlogComment () {
      const { data: res } = await this.$http.get('/comment/selectByBid.do?currentPage=' + this.queryInfo.cur + '&pageSize=' + this.queryInfo.size + '&bid=' + this.queryInfo.bid)
      console.log('获取文章评论', res)
      if (res.flag !== true) return this.$message.error('评论获取失败！')
      this.commentList = res.data.rows
      this.CommentTotal = res.data.total
    },
    // 返回事件
    goBack () {
      this.$router.go(-1)
    },
    // 获取当前时间
    getCurrentTime() {
      var myDate = new Date()
      var year = myDate.getFullYear()
      var mon = myDate.getMonth() + 1
      var date = myDate.getDate()
      var hours = myDate.getHours()
      var minutes = myDate.getMinutes()
      var seconds = myDate.getSeconds()
      var now
      if (seconds < 10 && minutes < 10) {
      now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':0' + seconds
      } else if (seconds < 10 && minutes > 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':0' + seconds
      } else if (seconds > 10 && minutes < 10) {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':0' + minutes + ':' + seconds
      } else {
        now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
      }
      return now
    },
    // 提交评论
    async CommentSubmit () {
      const { data: res } = await this.$http.post('/comment/add.do?' +
        'bid=' + this.queryInfo.bid +
        '&content=' + this.commentForm.content +
        '&uid=' + localStorage.getItem('uid') +
        '&time=' + this.getCurrentTime()
      )
      console.log('提交评论', res)
      if (res.flag !== true) return this.$message.error('评论失败！')
      // this.blogInfo.statistic.commentsNum += 1
      this.getBlogComment(this.bid)
      this.$refs.commentRef.resetFields()
      this.getBlogComment()
      return this.$message.success('评论成功！')
    },
    // 重置评论
    CommentReset () {
      this.$refs.commentRef.resetFields()
    }
  },
  created () {
    // 可以获取路由路径中的路径参数 bid
    const bid = this.$route.params.bid
    this.queryInfo.bid = bid
    this.getBlog()
    this.getBlogComment()
  }
}
</script>

<style lang="less" scoped>
.el-button {
  outline: none;
}
.blogDetail_box {
  min-height: 540px;
  padding: 2% 5%;
  border: 1px solid #eee;
  transition: all 0.5s;
  .el-page-header {
    margin-bottom: 3%;
  }
  .md {
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
  }
  .card_detail {
    height: 40px;
    width: 100%;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    .rol {
      float: left;
      margin-right: 8px;
      i {
        margin-right: 4px;
      }
      span {
        margin-right: 5px;
      }
    }
  }
  .blog_bottom {
    .pre_next {
      margin-top: 2%;
      padding: 0 1%;
      display: flex;
      justify-content: space-between;
    }
    .good_show {
      position: relative;
      text-align: center;
      margin-top: 5%;
      .button {
        .el-button {
          outline: none;
        }
      }
      .show {
        display: flex;
        margin-top: 3%;
        justify-content: center;
      }
      .none {
        display: none;
        height: 0;
      }
      .transition-box {
        position: relative;
        width: 50%;
        height: 200px;
        border-radius: 4px;
        background: rgba(160, 233, 100, 0.5);
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2%;
        font-size: 14px;
        .good_right {
          width: 200px;
          // border: 1px solid red;
        }
        .good_left {
          width: 200px;
          // border: 1px solid red;
          span {
            color: sandybrown;
          }
          .point {
            margin-top: 20px;
          }
        }
      }
    }
    .end_tip {
      .copyright {
        ul {
          margin: 2em 0 0;
          padding: 0.5em 1em;
          border-left: 3px solid #ff1700;
          background-color: #f9f9f9;
          list-style: none;
          line-height: 2;
        }
      }
      p {
        text-align: center;
        color: #ccc;
        font-size: 16px;
        padding: 20px 0;
      }
    }
  }
}

.blogDetail_box:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.comment_box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 2%;
  padding: 3% 2%;
  .comment_tip {
    span {
      i {
        margin-right: 3px;
        color: red;
        font-weight: bold;
      }
    }
    p {
      margin-top: 1%;
    }
    .el-divider {
      height: 0.5px;
    }
  }
  .comment_list {
    margin-top: 3%;
    margin-bottom: 4%;
    position: relative;
    ul {
      margin-top: 3%;
      list-style: none;
      padding: 0 !important;
      li {
        min-height: 110px;
        padding: 10px 0;
        margin: 1% 0;
        border-bottom: 1px solid #eee;
        .lileft {
          float: left;
          margin: 0 2%;
        }
        .liright {
          p {
            color: #303133;
          }
          .info {
            margin-bottom: 1%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .infoUser {
              color: #1abc9c;
            }
            .infoTime {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
      .comment_end_tip {
        p {
          text-align: center;
          color: rgb(34, 33, 33);
        }
      }
    }
  }
}
</style>

<style lang="less">
.v-show-content {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
// 修改了投诉表单的label
.complain_form {
  .el-form-item {
    .el-form-item__label {
      line-height: 12px !important;
    }
  }
}
</style>
